import React, { Suspense } from 'react'
import routerlist from "../router/routerconfig";
import { Routeritem } from "../utils/type";
import { BrowserRouter, HashRouter, Route, Routes, Navigate } from 'react-router-dom'
interface Props {

}

const Routerview = (props: Props) => {
    let { mode, routes } = routerlist

    const renderRoutes = (arr: Routeritem[]) => {
        return arr && arr.map((item: Routeritem, index: number) => {
            return <Route key={index}
                path={item.path}
                element={item.to ? <Navigate to={item.to}></Navigate> : <item.element></item.element>}
            >
                {
                    item.children && renderRoutes(item.children)
                }
            </Route>
        })
    }

    return (
        <Suspense fallback={<div>路由加载中。。。</div>}>
            {
                mode === 'history' ?
                    <BrowserRouter>
                        <Routes>
                            {
                                renderRoutes(routes)
                            }
                        </Routes>
                    </BrowserRouter>
                    :
                    <HashRouter>
                        <Routes>
                            {
                                renderRoutes(routes)
                            }
                        </Routes>
                    </HashRouter>
            }
        </Suspense>
    )
}

export default Routerview
